<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
    
    <title>上传数据查询</title>
    <meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<link rel="stylesheet" href="resources/bootstrap/css/bootstrap.min.css">
	<script src="resources/common/jquery/jquery-3.2.1.min.js"></script>
	<script src="resources/bootstrap/js/bootstrap.min.js"></script>
	<script src="resources/toastr/js/toastr.js"></script>
	<link rel="stylesheet" href="resources/toastr/css/toastr.css">
	<script src="resources/common/js/echarts.js"></script>
	<script src="resources/common/js/echarts-data.js"></script>
	<link rel="stylesheet" href="resources/bootstrap-date/bootstrap-datepicker3.min.css">
	<script src="resources/bootstrap-date/bootstrap-datepicker.min.js"></script>
	<script src="resources/bootstrap-date/bootstrap-datepicker.zh-CN.min.js"></script>
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">    
	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
	<!--
	<link rel="stylesheet" type="text/css" href="styles.css">
	-->

  </head>
  <script type="text/javascript">
  	// 基于准备好的dom，初始化echarts实例
    var myChart = null;
    
	$(document).ready(function(){ 
 		$('.selectData').datepicker({
	        minView: "day", //  选择时间时，最小可以选择到那层；默认是‘hour’也可用0表示
	        language: 'zh-CN', // 语言
	        autoclose: true, //  true:选择时间后窗口自动关闭
	        format: 'yyyy-mm-dd', // 文本框时间格式，设置为0,最后时间格式为2017-03-23 17:00:00
	        todayBtn: true, // 如果此值为true 或 "linked"，则在日期时间选择器组件的底部显示一个 "Today" 按钮用以选择当前日期。
	        endDate:new Date()//时间最多选择到当前时间
	    });
 	//	$("[data-toggle='tooltip']").tooltip();//提示信息
 		
	    $("#search").click(function(){
	    	var reid = $("#cond").val() 
	    	var paramjson = {
	    		reid:reid,
	    		time1:$("#sel-time").val(),
	    		time2:$("#sel-time2").val() 
	    	}
	    	$.ajax({
        		url:"aalsearch.do",
        		type:"post",
        		async:true,//异步执行
        		timeout:5000,//超时时间5s
        		traditional:true,//防止转义--组合对象默认会被转义无法被springmvc转换
        		data:JSON.stringify(paramjson),//参数
        		contentType:'application/json;charset=utf-8',//参数类型
        		dataType:'JSON',
        		cache: false,  //禁用缓存
        		success:function(data){
        			if(data.code == 200){
        				var receives = data.data.datas
        				if(receives!=null && receives.length>0){
        					var str = "";
        					for(i=0;i<receives.length;i++){
        						var re = receives[i]
        						str += "<tr>";
        							if(re.aaldata.deviceType == '01'){//血压计
        								str += "<td>血压计";
		        						str += "</td>";
        							}else{
        								str += "<td>血糖仪";
		        						str += "</td>";
        							}
	        						str += "<td>";
	        							str += re.monitordata.imei;
	        						str += "</td>";
	        						str += "<td>";
	        							str += re.aaldata.imsi;
	        						str += "</td>";
	        						str += "<td>";
	        							str += re.aaldata.serialnumber;
	        						str += "</td>";
	        						if(re.aaldata.deviceType == '01'){//血压计
	        							if(re.aaldata.data == null){
	        								str += "<td>";
			        						str += "</td>";
			        						str += "<td>";
			        						str += "</td>";
			        						str += "<td>";
			        						str += "</td>";
	        							}else{
	        								str += "<td>";
		        								str += re.aaldata.data.gy;
			        						str += "</td>";
			        						str += "<td>";
			        							str += re.aaldata.data.dy;
			        						str += "</td>";
			        						str += "<td>";
			        							str += re.aaldata.data.xlv;
			        						str += "</td>";
	        							}
	        							
	        						}else{//血糖仪
	        							if(re.aaldata.data == null){
	        								str += "<td>";
			        						str += "</td>";
			        						str += "<td>";
			        						str += "</td>";
			        						str += "<td>";
			        						str += "</td>";
	        							}else{
	        								str += "<td>";
			        						str += "</td>";
			        						str += "<td>";
			        						str += "</td>";
			        						str += "<td>";
			        							str += re.aaldata.data.xt;
			        						str += "</td>";
	        							}
	        							
	        						}
	        						str += "<td>";
	        							str += re.monitordata.monitorTime;
	        						str += "</td>";
	        						str += "<td>";
	        							str += re.monitordata.createTime;
	        						str += "</td>";
	        						str += "<td>";
	        							str += "<button type='button' onclick='tb("+re.monitordata.id+",this)' class='btn btn-default'>详情</button>"+
	        							"<button type='button' onclick='cancletb("+re.monitordata.id+")' class='btn btn-default'>取消</button>"
	        						str += "</td>";
        						str += "</tr>";
        					}
        					$("#tab-cont").html(str)
        				}
        			}
        		},
        		error:function(){
        			
        		} 
        	});
	    });
	//    $('#sel-user').searchableSelect();
	
		$("#search").click();
 	});
 	
 	function cancletb(vid){
 		$("."+vid).remove()
 		
 	}
 	function tb(vid,t){
 		//先清除之前的图表
 		var datastr = $(".data")
	    for(var d=0;d<datastr.length;d++){
	    	$(datastr[d]).remove()
	    } 
	    var row = $(t).parent().parent()
	    if($("."+vid).html()==undefined){
 			$(row).after('<tr class="data '+vid+'"><td colspan="4" class="td'+vid+'"><div class="col-md-12 center-block" style="width: 100%;height:500px;" id="tb-cont'+vid+'"></div></td></tr>')
 		}
 		//后台查询设备监测数据
 		var paramjson = {
 			reid:vid
 		}
 		
 		$.ajax({
       		url:"searchdata.do",
       		type:'post',
       		async:true,//异步执行
       		timeout:5000,//超时时间5s
       		traditional:true,//防止转义--组合对象默认会被转义无法被springmvc转换
       		data:JSON.stringify(paramjson),//参数
       		contentType:'application/json;charset=utf-8',//参数类型
       		dataType:'JSON',
       		cache: false,  //禁用缓存
       		success:function(data){
       			if(data.code == 200){
       				$("#tb-cont"+vid).html(data.data.aal)
       			}else{
       				$("#tb-cont"+vid).html("服务器错误")	
       			}
       		},
       		error:function(){
       			$("#tb-cont"+vid).html("服务器未找到")
       		} 
       	});
 		
 	}
 	
  </script>
  <body>
  <div class="col-md-12" style="border:1px;">
   	<form class="form-inline" role="form" action="" method="post">
		  <div class="form-group">
		    <label for="cond">IMEI</label>
		    <input type="text" class="form-control" id="cond" placeholder="">
		  </div>
		  <div class="form-group">
		    <label for="sel-time">监测时间</label>
		    <input type='text' class='form-control selectData' id='sel-time' name='date'>-<input type='text' class='form-control selectData' id='sel-time2' name='date'>
		  </div>
		  <button type="button" id="search" class="btn btn-default">查询</button>
	</form>
	</div>
	<hr>
	<div class="col-md-12 center-block" >
		<table class="table table-bordered">
			<thead>
				<tr>
					<th>机器类型</th>
					<th>IMEI</th>
					<th>IMSI</th>
					<th>SN编码</th>
					<th>数据1</th>
					<th>数据2</th>
					<th>数据3</th>
					<th>监测时间</th>
					<th>上传时间</th>
					<th>操作</th>
				</tr>
			</thead>
			<tbody id="tab-cont">
				
			</tbody>
		</table>
	</div>
	<div class="col-md-12 center-block" style="width: 100%;height:400px;" id="tb-cont">
		
	</div>
  </body>
</html>
